<template>
  <el-table style="width: 100%" :data="tableData" stripe="true" border :span-method="handleSpanRow">
    <el-table-column label="流程" prop="process" width="200" align="center"></el-table-column>
    <el-table-column label="场景分类" prop="sceneCategory" width="500" align="center"></el-table-column>
    <el-table-column label="聚水潭单据" prop="jstDoc" width="200" align="center"></el-table-column>
    <el-table-column label="金蝶单据" prop="jdDoc" width="300" align="center"></el-table-column>
    <el-table-column label="聚水潭&金蝶单据数量核对结果（9.1-9.25）" align="center" width="400" prop="jdAndJstDocCountDiff"></el-table-column>
    <el-table-column label="备注" prop="remark" width="300" align="center"></el-table-column>
    <el-table-column v-for="item in columnList" :key="item.prop" align="center" :label="item.label">
      <template #default="scope">
        {{ scope.row[item.prop] }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const columnList = ref([
  {
    label: '系统',
    prop: 'system'
  },
  {
    label: '9月1日',
    prop: 'date1'
  },
  {
    label: '9月2日',
    prop: 'date2'
  },
  {
    label: '9月3日',
    prop: 'date3'
  },
  {
    label: '9月4日',
    prop: 'date4'
  },
  {
    label: '9月5日',
    prop: 'date5'
  }
]);

const tableData = ref([
  {
    process: '采购流程（含委外）',
    sceneCategory: '东莞仓，国内在途仓',
    jstDoc: '采购入库单',
    jdDoc: '采购入库单',
    jdAndJstDocCountDiff: '有差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '金蝶',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  },
  {
    process: '采购流程（含委外）',
    sceneCategory: '东莞仓，国内在途仓',
    jstDoc: '采购入库单',
    jdDoc: '采购入库单',
    jdAndJstDocCountDiff: '有差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '聚水潭',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  },
  {
    process: '2C销售',
    sceneCategory: '销售发货',
    jstDoc: '销售出库单',
    jdDoc: '直接调拨单（东莞仓->在途）',
    jdAndJstDocCountDiff: '有差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '金蝶',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  },
  {
    process: '2C销售',
    sceneCategory: '销售退货（售后单）',
    jstDoc: '售后单',
    jdDoc: '直接调拨单（在途->销退仓）',
    jdAndJstDocCountDiff: '有差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '聚水潭',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  },
  {
    process: '寄售',
    sceneCategory: '寄售调拨（猫超，进口猫超，京东自营）',
    jstDoc: '销售出库单',
    jdDoc: '直接调拨单（东莞仓->寄售仓）',
    jdAndJstDocCountDiff: '有差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '聚水潭',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  },
  {
    process: '寄售',
    sceneCategory: '寄售换货-售后单(猫超售后店铺，进口猫超售后店铺)',
    jstDoc: '售后单',
    jdDoc: '销售退货单',
    jdAndJstDocCountDiff: '无差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '聚水潭',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  },
  {
    process: '寄售',
    sceneCategory: '寄售换货-发货(猫超售后店铺，进口猫超售后店铺)',
    jstDoc: '销售出库单',
    jdDoc: '销售出库单',
    jdAndJstDocCountDiff: '有差异',
    remark: '1、聚水潭入仓单号为2060134。入库日期为9.11的采购入库单，在金蝶无此单据',
    system: '聚水潭',
    date1: '2354',
    date2: '854',
    date3: '4062',
    date4: '13636',
    date5: '1254'
  }
]);

const handleSpanRow = ({ row, rowIndex, column, columnIndex }) => {
  if (columnIndex < 2) {
    const firstRow = tableData.value[rowIndex - 1];
    const currentRow = tableData.value[rowIndex];
    if (firstRow && firstRow[column.property] === currentRow[column.property]) {
      return [0, 0]; // 不显示当前单元格
    }
    let rowSpan = 1;
    loop: for (let i = rowIndex + 1; i < tableData.value.length; i++) {
      if (tableData.value[i][column.property] === currentRow[column.property]) {
        rowSpan++;
      } else {
        break loop;
      }
    }
    return [rowSpan, 1]; // 合并行数
  }
};
</script>
<style scoped></style>
